import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Migration/from v0/Components/Card Migration/CardPreview" />

# Card Preview Migration

## Overview

Before:

```tsx
import { CardPreview, Image } from '@fluentui/react-northstar';

const Component = () => (
  <CardPreview>
    <Image fluid src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
  </CardPreview>
);
```

After:

```tsx
import { CardPreview } from '@fluentui/react-components';

const Component = () => (
  <CardPreview>
    <img src="https://url-of.the/image.jpg" alt="Preview of a Word document" />
  </CardPreview>
);
```

## How to migrate props:

| CardPreview props | migration guide                                                                                                                             |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| as, className     | keep it as is                                                                                                                               |
| variables, styles | see Migrate `style` overrides in this document                                                                                              |
| accessibility     | see [migrate-custom-accessibility.md](?path=/docs/concepts-migration-from-v0-custom-accessibility--page). Also check the focusMode new prop |
| fitted            | REMOVED: by default, all Previews are fitted                                                                                                |
| horizontal        | REMOVED: no longer supported                                                                                                                |

## Migrate style overrides

⚠️ **If this is your first migration**, please read [the general guide on how to migrate styles](?path=/docs/concepts-migration-from-v0-custom-style-overrides--page).

### Example for migrate boolean `variables`:

Follow the same patterns as in the Card [migration guide](?path=/docs/concepts-migration-from-v0-components-card-migration-card--page).
